<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<style type="text/css">
			html,
			body {
				background-color: transparent;
			}
			
			.element {
				position: fixed;
				top: 0;
				left: 0;
				display: block;
				background-color: transparent;
				background-image: url("");
				background-size: 100%;
			}
		</style>
		<script type="text/javascript">
            function Point(x, y) {
                this.x = x;
                this.y = y;
            }

            function ElementPoint(x, y) {
                this.x = x;
                this.y = y;
                this.el = null;
                this.render = function () {
                    if (!this.el) {
                        this.el = document.createElement("span");
                        this.el.setAttribute("style", "width: " + elementSize + "px; height: " + elementSize + "px;");
                        this.el.setAttribute("class", "element");
                        document.body.appendChild(this.el);
                    }
                    this.el.style.top = this.y + "px";
                    this.el.style.left = this.x + "px";
                };
                this.reset = function (x, y) {
                    this.x = x;
                    this.y = y;
                };
            }

            var elementSize = 24;
            var elmentArr = new Array(20);
            var historyArr = new Array(elmentArr.length);

            function loadFunc() {
                for (var i = 0; i < elmentArr.length; i++) {
                    elmentArr[i] = new ElementPoint(0, 0);
                    elmentArr[i].render();
                }
                resetHistory(0, 0);
                setInterval(actionLoop, 30);
            }

            function resetHistory(x, y) {
                for (let i = 0; i < historyArr.length; i++) {
                    historyArr[i] = new Point(x, y);
                }
            }
            
            function actionLoop() {
                for (var i = historyArr.length - 1; i > 0 ; i--) {
                    historyArr[i].x = historyArr[i - 1].x;
                    historyArr[i].y = historyArr[i - 1].y;
                    elmentArr[i].reset(historyArr[i - 1].x, historyArr[i - 1].y);
                    elmentArr[i].render();
                }
                if (historyArr[0].x == historyArr[historyArr.length -1].x && historyArr[0].y == historyArr[historyArr.length -1].y) {
                    resetHistory(elmentArr[0].x, elmentArr[0].y);
                }
            }

            function mouseMoveAction(e) {
                var x = e.clientX + 10;
                var y = e.clientY + 10;
                elmentArr[0].reset(x, y);
                elmentArr[0].render();

                var dis = calculateDistance(x, y, historyArr[0].x, historyArr[0].y);
                if (dis > elementSize) {
                    var mDis = dis % elementSize || elementSize;
                    var middlePoint = calculatePosition(x, y, historyArr[0].x, historyArr[0].y, mDis, dis);
                    var currentPoint = historyArr[0];
                    historyArr[0] = middlePoint;
                    dis = dis - mDis;
                    var count = parseInt(dis / elementSize);
                    if (count > historyArr.length - 1) {
                        count = historyArr.length - 1;
                    }
                    for (var i = elmentArr.length - 1; i > count; i--) {
						historyArr[i] = historyArr[i - count];
                    }
                    for (var i = 1; i <= count; i++) {
                        historyArr[i] = middlePoint = calculatePosition(middlePoint.x, middlePoint.y, currentPoint.x, currentPoint.y, elementSize, dis - ((i - 1) * elementSize));
                    }
                }

                for (var i = 1; i < historyArr.length; i++) {
                    elmentArr[i].reset(historyArr[i - 1].x, historyArr[i - 1].y);
                    elmentArr[i].render();
                }

            }

            //求两点距离
            function calculateDistance(x, y, x1, y1) {
                return Math.sqrt(Math.pow(x - x1, 2) + Math.pow(y - y1, 2));
            }

            //已知距离和两点坐标，求另一点坐标
            function calculatePosition(x, y, x1, y1, d, r) {
                var cy = (d * (y1 - y)) / r + y;
                var cx = (d * (x1 - x)) / r + x;
                return new Point(cx, cy);
            }

            window.addEventListener("load", loadFunc, false);
            window.addEventListener("mousemove", mouseMoveAction, false);
		</script>
	</head>
	<body>
	</body>
</html>
